<template>
  <div>
    <!-- 搜索表单 -->
    <!-- @submit.native.prevent停止默认行为 @submit是提交-->
    <el-form :inline="true" class="demo-form-inline"  @submit.native.prevent>
      <el-form-item label="预约商品名称">
        <el-input v-model="name"  placeholder="请输入预约商品名称" @keyup.native.enter="search"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 点击回车 -->
        <el-button type="primary" @click="search"  >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 分割线 -->
    <el-divider content-position="left">商品列表</el-divider>

    <!-- 表格 -->
    <template style="table-layout:fixed">
      <el-table
        :data="reservats.results"
        style="width: 100%;">
        <el-table-column
          label="编号"
          type="index"
          align="center"
          width="50">
        </el-table-column>
        <el-table-column
          prop="uname"
          label="顾客名称"
          align="center"
          width="150"
         >
        </el-table-column>
        <el-table-column
          prop="westerndetail"
          label="预约商品"
          align="center"  
          width="150">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="preTime"
          label="时间"
          align="center"
          width="260"
        >
        </el-table-column>
        <el-table-column
          prop="bodNumber"
          label="到场人数"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
         v-if="resertype == 2"
          prop="cause"
          label="失效原因"
          align="center"
          width="100"
        >
        </el-table-column>
          <el-table-column  align="center" label="操作">
            <template slot-scope="scope">
              <el-button v-show="!resertype == 1" type="success" icon="el-icon-s-claim" circle  @click="change(scope.row,1)"></el-button>

            <el-button  type="info" icon="el-icon-s-release" circle  @click="expire(scope.row,2)"></el-button>

              <el-button v-show="!resertype == 0 "   type="primary" icon="el-icon-s-order" circle @click="change(scope.row,0)"></el-button>

              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </template>           
          </el-table-column>
      </el-table>
    </template>   
    <!-- 原因 -->
    <el-dialog title="失效原因" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="textarea">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入原因"
            v-model="form.textarea">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import httpApi from "@/http";
import cause from "./cause.vue";
// import ExpireReserva from "../expireReserva.vue";
  export default {
    components: { cause },
    props: {
      resertype: Number,
    },
    data(){
        return{
          name:'',
          reservats:{},
          dialogFormVisible:false,
          form:{
            textarea:'',
            id:''
          },
          rules: {
            textarea: [
              { required: true, message: '请输入失效原因', trigger: 'blur' },
              { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
            ],
          }
        }
    },
    methods:{
      // 删除电影列表
      DeleteItem(pro_id){
        // 弹窗
        this.$confirm('此操作将永久删除用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          // 确定
          // httpApi.proApi.deleteproById({pro_id}).then(res =>{
          //   if(res.data.code == 200){
          //      console.log("删除成功",res);
          //     // 提醒用户删除成功
          //     this.$message({ type: 'success', message: '删除成功!' });
          //     // 刷新
          //     this.search()
          //   }else{
          //     // 提醒用户删除失败
          //     this.$message.error('错了哦，删除失败');
          //   }
           
          // })
        }).catch(() => {
            this.$message({ type: 'info', message: '已取消删除' });          
          });
        },

        // 点击查询按钮后执行，需要判断输入框中是否有关键字
        //trim()是去掉字符串两端的空格
        search(){

          if(this.name.trim() == ''){
            //当无输入值
            this.$store.state.utype == 1 ?  this.listpro() : this.listStorereser()
          }else{
            //有输入值
            this.listreserByName()
            
          }
        },
        // 封装预约列表
        listPro(){
          // let url = "http://localhost:3000/pro/list?page=1&pagesize=100"
          let params = {page: this.pro.page ,pagesize: this.pro.pagesize}
          httpApi.proApi.queryAllProList(params).then(res =>{
            // console.log("商品列表",res);
            this.reservats = res.data
           
          })
        },
        // 封装店铺预约
        listStorereser(){
          let params = {store_id:this.$store.state.uid,finish: this.resertype}
          httpApi.reservatApi.queryUnReservat(params).then(res =>{
            // console.log("预约列表",res);
            this.reservats = res.data
            
          })
        },

        // 通过昵称关键字查询演员列表
      listreserByName(){
          let params = {store_id:this.$store.state.uid,finish: this.resertype,westerndetail:this.name}
            httpApi.reservatApi.queryReservaByNameLike(params).then(res =>{
              // console.log("商品模糊查询",res);
              this.reservats = res.data
            })     
      },

      // 点击完成
      change(row,num){
        let params = {reservation_id:row.reservation_id ,finish: num}
        httpApi.reservatApi.queryFinishReserva(params).then(res=>{
          // console.log(res);
          if(res.data.code === 200 && res.data.msg === 'ok'){
            if(num === 1){
              this.$message({
                message: '恭喜你,完成预约',
                type: 'success'
              });
              this.$router.push(`/home/in-Reserva`)
            }else if(num === 0){
              this.$message({
                message: '修改成未完成预约',
                type: 'success'
              });
              this.$router.push(`/home/un-Reserva`)
            }
            
          }else{
            this.$message({
              showClose: true,
              message: '失败',
              type: 'error'
            });
          }
        })      
      },
      // 失效
      expire(row,num){
          // console.log(row,num);
          this.form.id = row.reservation_id
          this.dialogFormVisible = true
      },
      submitForm(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
             let params = {reservation_id: this.form.id ,finish: 2 , cause:this.form.textarea}
              httpApi.reservatApi.queryExpireReserva(params).then(res =>{
                  // console.log(res,'222');
                  if(res.data.code === 200 && res.data.msg === 'ok'){
                    this.$message({
                      message: '转为失效列表',
                      type: 'success'
                    });
                    this.$router.push(`/home/expire-Reserva`)
                  }else{
                    this.$message({
                      showClose: true,
                      message: '失败',
                      type: 'error'
                    });
                  }
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(form) {
        this.$refs[form].resetFields();
        this.dialogFormVisible = false
      }

    },
    
    mounted(){
        if(this.$store.state.utype == 1){
          //页面挂在完毕后，发送请求，加载列表数据
          this.listPro()
        }else{
          this.listStorereser()
        }
        
    }
  }
</script>

<style lang="scss" scoped>

  .el-tooltip__popper {
  max-width: 60px;
}


</style>